import {Card, List} from "antd";
import {ArrowLeftOutlined} from "@ant-design/icons";
import LinkButton from "../../components/link-button";
import {useLocation, useNavigate} from "react-router-dom";
import {BASE_IMG_URL} from "../../utils/constants";
import {useEffect, useState} from "react";
import {reqCategory} from "../../apis";


const Item = List.Item
const ProductDetail = () => {
    const navigate = useNavigate()
    // 一级分类名称
    const [cname1,setCname1] = useState('')
    // 二级分类名称
    const [cname2,setCname2 ] = useState('')

    const title = <span>
        <LinkButton>
            <ArrowLeftOutlined onClick={() => navigate('/product')}/>
        </LinkButton>

        <span style={{marginLeft: '10px'}}>商品详情</span>
    </span>

    // 获取home 传递来的product对象
    const location = useLocation()
    console.log('home传递的数据',location.state.product)
    const product = location.state.product
    // 对象参数解构
    // categoryId  当前商品分类Id  pCategoryId 父分类Id
    const {name, desc, price, detail, imgs, _id, categoryId, pCategoryId} = product

    useEffect(() => {
        getCategory()
    }, []);

    // 获取分类对象
    const getCategory  = async () => {
      try{
          console.log('获取到的分类id',categoryId)
          if(pCategoryId === '0'){
              // 一级分类下商品
              const res = await reqCategory(categoryId)
              setCname1(res.data.name)
          }else{
              // 二级分类下商品
              // 多个await 发请求 后面一个在前一个成功后才发送
              const res1 = await reqCategory(categoryId)
              const res2 = await reqCategory(pCategoryId)

              // 一次性发多个请求 都成功了才处理 Promise.all
              // const results = await Promise.all([reqCategory(categoryId),reqCategory(pCategoryId)])
              // setCname1(results[0].data.name)
              // setCname2(results[1].data.name)

              setCname1(res1.data.name)
              setCname2(res2.data.name)
          }

          console.log('获取到的分类对象名称',cname1,cname2)
      }catch (e) {
          console.log('获取分类名称失败',e)
      }
    }

    // Product详情路由界面
    return (
        <Card title={title} className='product-detail'>
            <List>
                <Item>
                    <span className="left">商品名称:</span>
                    <span>{name}</span>
                </Item>

                <Item>
                    <span className="left">商品描述:</span>
                    <span>{desc}</span>
                </Item>
                <Item>
                    <span className="left">商品价格:</span>
                    <span>{price} 元</span>
                </Item>
                <Item>
                    <span className="left">所属分类:</span>
                    <span>3</span>
                </Item>
                <Item>
                    <span className="left">商品图片:</span>
                    <span>
                      {
                          imgs.map(img => (
                              <img
                                  key={img}
                                  src={BASE_IMG_URL + img}
                                  className="product-img"
                                  alt="img"
                              />
                          ))
                      }
                    </span>
                </Item>
                <Item>
                    <span className="left">商品详情:</span>
                    {/*<span dangerouslySetInnerHTML={{__html: detail}}>*/}
                    {/*</span>*/}
                </Item>
            </List>
        </Card>
    )
}
export default ProductDetail;
